<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="queryForm"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					label="公告标题:"
					prop="merchantId"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.title"
						clearable
						:maxlength="100"
						size="medium"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item
					label="维护终端:"
					class="flex-row-container"
					label-width="77px"
				>
					<el-select
						v-model="queryData.terminalInfo"
						multiple
						collapse-tags
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in deviceTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('common.status') + ':'"
					class="flex-row-container"
					label-width="55px"
				>
					<el-select
						v-model="queryData.status"
						clearable
						:placeholder="$t('common.select_all')"
					>
						<el-option
							:key="0"
							:value="0"
							label="待开启"
						></el-option>
						<el-option
							:key="1"
							:value="1"
							label="开启中"
						></el-option>
						<el-option
							:key="2"
							:value="2"
							label="半维护"
						></el-option>
						<el-option
							:key="3"
							:value="3"
							label="已结束"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="queryData.opType"
						:placeholder="$t('common.please_choose')"
						style="width:150px"
					>
						<el-option
							:label="$t('common.createBy')"
							value="0"
						></el-option>
						<el-option
							:label="$t('common.last_updateBy')"
							value="1"
						></el-option>
					</el-select>
					<el-input
						v-if="queryData.opType == '0'"
						v-model="queryData.createdBy"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 278px"
						v-input="{ name: 'num_alp' }"
					></el-input>
					<el-input
						v-if="queryData.opType == '1'"
						v-model="queryData.updatedBy"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 278px"
						v-input="{ name: 'num_alp' }"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90120024')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="Add"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="list"
				highlight-current-row
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
			>
				<el-table-column
					prop="title"
					align="center"
					label="公告标题"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.title || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="维护时间"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.startTime || '-' }}
						</span>
						<br />
						<span>
							{{ scope.row.endTime || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="维护终端"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{
								splitStrTerminalInfo(scope.row.terminalInfo) ||
									'-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="状态"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:class="{
								color67C:
									scope.row.status == 1 ||
									scope.row.status == 2
							}"
						>
							{{ splitStrStatus(scope.row.status) || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="创建人"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.createdBy || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="创建时间"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.createdAt || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="最后操作人"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.updatedBy || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="title"
					align="center"
					label="最后操作时间"
					width="200px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.updatedAt || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="operating"
					align="center"
					:label="$t('common.actions')"
					width="320px"
				>
					<template slot-scope="scope">
						<template v-if="hasPermission('90120023')">
							<el-button
								v-if="buttonStatus('0', scope.row.status)"
								:disabled="scope.row.retract === 1"
								type="success"
								size="mini"
								@click="openMaintenance(scope.row)"
							>
								开启
							</el-button>
						</template>
						<template v-if="hasPermission('90120027')">
							<el-button
								v-if="buttonStatus('1', scope.row.status)"
								:disabled="scope.row.retract === 1"
								type="primary"
								size="mini"
								@click="halfMaintenance(scope.row)"
							>
								半维护
							</el-button>
						</template>
						<template v-if="hasPermission('90120027')">
							<el-button
								v-if="buttonStatus('12', scope.row.status)"
								:disabled="scope.row.retract === 1"
								type="danger"
								size="mini"
								@click="closeMaintenance(scope.row)"
							>
								结束
							</el-button>
						</template>
						<template v-if="hasPermission('90120025')">
							<el-button
								v-if="buttonStatus('012', scope.row.status)"
								:disabled="scope.row.retract === 1"
								type="primary"
								size="mini"
								@click="editMaintenance(scope.row)"
							>
								编辑
							</el-button>
						</template>
						<template v-if="hasPermission('90120026')">
							<el-button
								v-if="buttonStatus('012', scope.row.status)"
								:disabled="scope.row.retract === 1"
								type="warning"
								size="mini"
								@click="deleteMaintenance(scope.row)"
							>
								删除
							</el-button>
						</template>
						<el-button
							v-if="buttonStatus('3', scope.row.status)"
							:disabled="scope.row.retract === 1"
							type="primary"
							size="mini"
							@click="viewMessage(scope.row)"
						>
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="addEditTitle"
			:visible.sync="dialogFormVisible"
			:destroy-on-close="true"
			width="700px"
			center
			@close="clear"
		>
			<el-form
				ref="formSub"
				:inline="true"
				:model="dialogForm"
				:rules="dataRule"
				label-width="120px"
			>
				<el-form-item
					label="维护终端:"
					class="tagheight"
					prop="terminalInfo"
				>
					<el-select
						v-model="dialogForm.terminalInfo"
						multiple
						collapse-tags
						:placeholder="$t('common.please_choose')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in deviceTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					label="维护开始时间:"
					prop="onlineTime"
					:rules="[
						{
							required: true,
							validator: validateUpTime,
							trigger: 'blur'
						}
					]"
				>
					<el-date-picker
						v-model="onlineTime"
						size="medium"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="dateNow"
						type="datetime"
						:clearable="false"
						@change="changeTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					label="维护结束时间:"
					prop="offlineTime"
					:rules="[
						{
							required: true,
							validator: validateDownTime,
							trigger: 'blur'
						}
					]"
				>
					<el-date-picker
						v-model="offlineTime"
						size="medium"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="dateEnd"
						type="datetime"
						:clearable="false"
						@change="changeTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="
						$t('operation.announcement.announcement_title') + ':'
					"
					class="tagheight"
					prop="title"
				>
					<el-input
						v-model="dialogForm.title"
						:placeholder="$t('common.please_enter')"
						:maxlength="100"
						clearable
						show-word-limit
						v-input="{ name: 'symbols' }"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						$t('operation.announcement.announcement_content') + ':'
					"
					class="tagheight"
					prop="content"
				>
					<el-input
						v-model="dialogForm.content"
						:placeholder="$t('common.please_enter')"
						:maxlength="500"
						clearable
						type="textarea"
						show-word-limit
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:loading="loading"
					@click="subAddOrEidt"
				>
					{{ $t('common.save') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:title="$t('common.check')"
			:visible.sync="lookVisible"
			:destroy-on-close="true"
			class="rempadding"
		>
			<el-table
				v-loading="loading2"
				size="mini"
				border
				class="small-size-table"
				:data="userList"
				style="width: 100%; margin-bottom: 15px"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					type="index"
					align="center"
					:label="$t('common.serial_number')"
					width="100"
				>
					<template slot-scope="scope">
						<span>{{ _getSerialNum(scope.$index) }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="username"
					align="center"
					:label="$t('operation.send_member_number')"
				>
					<template slot-scope="scope">
						{{ scope.row.username }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageD"
				background
				class="fenye"
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="sizeD"
				:page-sizes="pageSizes"
				:total="summary"
				:pager-count="9"
				@current-change="handleCurrentChangeDialog"
				@size-change="handleSizeChangeDialog"
			></el-pagination>
		</el-dialog>
		<!--查看公告-->
		<el-dialog
			:title="maintenance.title"
			:visible.sync="maintenance.maintenanceVisible"
			width="600px"
			custom-class="noUnderLine"
			center
		>
			<div style="font-size: 20px;text-align: center;height: 50px;">
				公告标题
			</div>
			<div class="maintenanceContent">
				{{ maintenance.maintenanceContent }}
			</div>
			<div slot="footer" class="dialog-footer">
				维护结束时间：{{ maintenance.maintenanceEndTime }}
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
import MainContent from '@/components/MainContent/index.vue'

const endTime = dayjs().endOf('date')
export default {
	name: routerNames.notice,
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			memberValidErrorMsg: this.$t('operation.input_tips1'),
			loading2: false,
			queryData: {
				title: undefined,
				terminalInfo: [],
				opType: '0',
				status: undefined,
				createdBy: undefined,
				updatedBy: undefined
			},
			dialogFormVisible: false,
			dialogForm: {
				title: undefined,
				content: undefined,
				terminalInfo: [],
				startTime: undefined,
				endTime: undefined
			},
			lookVisible: false,
			recordId: '',
			userList: [],
			pageD: 1,
			sizeD: 10,
			summary: 0,
			merchantInfoA: {
				languages: 'zh_CN'
			},
			deviceTypeList: [
				{
					code: 1,
					description: '前台客户端'
				},
				{
					code: 2,
					description: '代理后台'
				}
			],
			onlineTime: Date.now(),
			offlineTime: endTime,
			dateNow: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
				}
			},
			dateEnd: {
				disabledDate(time) {
					return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
				}
			},
			maintenance: {
				title: '',
				maintenanceVisible: false,
				maintenanceContent:
					'为了给您提供更优质的服务，本站将进行服务器维护，具体恢复时间另行通知，维护期间暂停某某相关服务，给您带来不便尽请谅解！',
				maintenanceEndTime: ''
			},
			addEditTitle: ''
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		blackStatusType() {
			return this.globalDics.blackStatusType || []
		},
		// loginDeviceType() {
		// 	return this.globalDics.loginDeviceType || []
		// },
		userTypes() {
			return [
				{
					code: '1',
					description: this.$t('operation.specific_member')
				},
				{
					code: '0',
					description: this.$t('operation.all_member')
				}
			]
		},
		sendObjTypes() {
			// return this.globalDics.loginDeviceType || []
			return [
				{ code: '1', description: this.$t('operation.member') },
				{ code: '2', description: this.$t('operation.device') }
			]
		},
		dataRule() {
			return {
				deviceType: [
					{
						required: true,
						message: this.$t('operation.input_tips2'),
						trigger: 'change'
					}
				],
				title: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleEn: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleTh: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				titleVi: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips5'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 100,
						message: this.$t('operation.limit100'),
						trigger: 'blur'
					}
				],
				content: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips6'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				contentEn: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips6'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				contentTh: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips6'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				contentVi: [
					{
						required: true,
						message: this.$t('operation.notice_config.input_tips6'),
						trigger: 'blur'
					},
					{
						min: 1,
						max: 2000,
						message: this.$t('operation.limit2000'),
						trigger: 'blur'
					}
				],
				sendObj: [
					{
						required: true,
						message: this.$t('common.please_enter'),
						trigger: 'blur'
					}
				],
				merchantId: [
					{
						required: true,
						message: this.$t('operation.please_choose_merchant'),
						trigger: ['blur', 'change']
					}
				],
				terminalInfo: [
					{
						required: true,
						message: '请选择要维护的终端',
						trigger: ['blur', 'change']
					}
				]
			}
		}
	},
	watch: {
		// 'dialogForm.userType'() {
		// 	this.dialogForm.objDetail = undefined
		// }
		// 'dialogForm.sendObj'(val) {
		// 	if (val === '1') {
		// 		this.dialogForm.deviceType = []
		// 		this.dialogForm.userType = '0'
		// 	} else {
		// 		this.dialogForm.deviceType = this.loginDeviceType.map((i) =>
		// 			String(i.code)
		// 		)
		// 		this.dialogForm.userType = '0'
		// 	}
		// }
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
		}
		this.loadData()
	},
	methods: {
		changeTime(val) {
			// this.onlineTime = val
		},
		validateUpTime(rule, value, callback) {
			const up = dayjs(this.onlineTime).unix()
			const down = dayjs(this.offlineTime).unix()
			if (!this.onlineTime) {
				return callback(this.$t('common.please_choose'))
			}
			if (up >= down && this.dialogForm.aging === 1) {
				return callback(this.$t('operation.maintenance.time_warning1'))
			}
			callback()
		},
		validateDownTime(rule, value, callback) {
			const up = dayjs(this.onlineTime).unix()
			const down = dayjs(this.offlineTime).unix()
			if (!this.offlineTime) {
				return callback(this.$t('common.please_choose'))
			}
			if (up >= down) {
				return callback(this.$t('operation.maintenance.time_warning2'))
			}
			callback()
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		filterLanguages(lang) {
			return this.merchantInfoA?.languages
				? this.merchantInfoA?.languages?.indexOf(lang) !== -1
				: false
		},
		loadData() {
			const params = {
				...this.getParams(this.queryData)
			}
			params.terminalInfo = this.returnTerminalInfoNewData(
				params.terminalInfo
			)
			for (const k in params) {
				if (params[k] === '') {
					delete params[k]
				}
			}
			if (params.opType === '0') {
				delete params.updatedBy
			} else {
				delete params.createdBy
			}
			delete params.opType
			this.list = []
			this.loading = true
			this.$api
				.getsysMaintenanceList(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.list = record || []
					this.total = totalRecord || 0

					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				title: undefined,
				terminalInfo: [],
				opType: '0',
				status: undefined,
				createdBy: undefined,
				updatedBy: undefined
			}
			this.pageNum = 1
			this.loadData()
		},
		buttonStatus(bs, cs) {
			if (bs.indexOf(cs) !== -1) {
				return true
			} else {
				return false
			}
		},
		Add() {
			this.addEditTitle = this.$t('common.add')
			this.dialogForm = {
				title: '',
				terminalInfo: [],
				endTime: '',
				startTime: '',
				content: ''
			}
			this.dialogFormVisible = true
		},
		subAddOrEidt() {
			const params = {
				...this.dialogForm
			}
			params.startTime = dayjs(this.onlineTime).format(
				'YYYY-MM-DD HH:mm:ss'
			)
			params.endTime = dayjs(this.offlineTime).format(
				'YYYY-MM-DD HH:mm:ss'
			)
			if (+new Date(params.startTime) < +new Date()) {
				return this.$message.error(this.$t('开始时间不能早于当前时间'))
			}
			if (+new Date(params.startTime) > +new Date(params.endTime)) {
				return this.$message.error(
					this.$t('维护结束时间不能早于开始时间')
				)
			}
			params.terminalInfo = this.returnTerminalInfoNewData(
				params.terminalInfo
			)
			this.$refs.formSub.validate((valid) => {
				if (valid) {
					this.loading = true
					if (this.addEditTitle === this.$t('common.add')) {
						this.$api
							.getsysMaintenanceAdd(params)
							.then((res) => {
								this.loading = false
								if (res?.code === 200) {
									this.$message.success(
										this.$t('common.action_success')
									)
									this.dialogFormVisible = false
									this.loadData()
								}
							})
							.catch((e) => {
								this.loading = false
							})
					} else {
						this.$api
							.getsysMaintenanceUpdate(params)
							.then((res) => {
								this.loading = false
								if (res?.code === 200) {
									this.$message.success(
										this.$t('common.action_success')
									)
									this.dialogFormVisible = false
									this.loadData()
								}
							})
							.catch((e) => {
								this.loading = false
							})
					}
				}
			})
		},
		// 开始维护
		openMaintenance(row) {
			this.$confirm(
				`<strong>是否开启该配置的操作?</strong></br><strong style="color:#D9001B">一旦操作将会立即生效</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const params = {}
					params.id = row.id
					params.status = 1
					this.$api
						.getsysMaintenanceUpdateStatus(params)
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success('开启成功')
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		// 半维护
		halfMaintenance(row) {
			this.$confirm(
				`<strong>确定半维护此条配置?</strong></br><strong style="color:#D9001B">请谨慎操作</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const params = {}
					params.id = row.id
					params.status = 2
					this.$api
						.getsysMaintenanceUpdateStatus(params)
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success('半维护成功')
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		// 结束维护
		closeMaintenance(row) {
			this.$confirm(
				`<strong>是否结束该配置的操作?</strong></br><strong style="color:#D9001B">一旦操作将会立即生效</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const params = {}
					params.id = row.id
					params.status = 3
					this.$api
						.getsysMaintenanceUpdateStatus(params)
						.then((res) => {
							if (res?.code === 200) {
								this.$message.success('结束维护成功')
								this.loadData()
							}
						})
				})
				.catch(() => {})
		},
		// 删除维护
		deleteMaintenance(row) {
			this.$confirm(
				`<strong>确定删除此条配置?</strong></br><strong style="color:#D9001B">请谨慎操作</strong>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning',
					customClass: 'positionIcon'
				}
			)
				.then(() => {
					const params = {}
					params.id = row.id
					this.$api.getsysMaintenanceDelete(params).then((res) => {
						if (res?.code === 200) {
							this.$message.success('删除成功')
							this.loadData()
						}
					})
				})
				.catch(() => {})
		},
		// 查看
		viewMessage(row) {
			this.maintenance.maintenanceVisible = true
			this.maintenance.maintenanceEndTime = row.endTime
		},
		// 编辑
		editMaintenance(row) {
			if (row.terminalInfo === 3) {
				row.terminalInfo = [1, 2]
			} else {
				row.terminalInfo = [row.terminalInfo]
			}
			this.addEditTitle = this.$t('common.edit')
			this.dialogFormVisible = true
			this.dialogForm = row
		},
		clear() {
			this.$refs.formSub.resetFields()
		},
		returnTerminalInfoNewData(terminalInfo) {
			if (terminalInfo?.length) {
				terminalInfo = terminalInfo.join(',')
			} else {
				return ''
			}
			if (terminalInfo === '1,2' || terminalInfo.length === 0) {
				terminalInfo = 3
			} else {
				terminalInfo = Number(terminalInfo)
			}
			return terminalInfo
		},
		// 弹框标签添加人数
		getOperateConfigNoticeSelectDetail() {
			this.loading2 = true
			const params = {}
			params.noticeId = this.recordId
			params.configType = 1
			params.pageNum = this.pageD
			params.pageSize = this.sizeD
			this.$api.getBwConfigNoticeDetails(params).then((res) => {
				if (res?.code === 200) {
					this.userList = res.data?.record || []
					this.summary = res.data?.totalRecord || 0
					this.lookVisible = true
				}
				this.loading2 = false
			})
		},
		splitStrStatus(code) {
			switch (code) {
				case 0:
					return '待开启'
				case 1:
					return '开启中'
				case 2:
					return '半维护'
				case 3:
					return '已结束'
			}
		},
		splitStrTerminalInfo(code) {
			if (code === 1) {
				return '前台客户端'
			} else if (code === 2) {
				return '代理后台'
			} else {
				return '前台客户端，代理后台'
			}
		},
		lookGame(val) {
			this.pageD = 1
			this.sizeD = 10
			this.userList = []
			this.recordId = val.id
			this.lookVisible = true
			this.getOperateConfigNoticeSelectDetail()
		},
		handleCurrentChangeDialog(val) {
			this.pageD = val
			this.getOperateConfigNoticeSelectDetail()
		},
		handleSizeChangeDialog(val) {
			this.sizeD = val
			this.getOperateConfigNoticeSelectDetail()
		},

		filterTerminal(val) {
			const arr = val ? val.split(',') : []
			if (arr.length) {
				return arr
					.map((item) => this.typeFilter(item, 'clientType'))
					.join(',')
			}
			return '-'
		},
		_getSerialNum(index) {
			return (this.pageD - 1) * this.sizeD + index + 1
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
	border: 1px solid #dddddd;
}
::v-deep .tagheight {
	.el-form-item__content,
	.el-select {
		width: 480px;
	}
}
.tooltip-content {
	width: 250px;
}
.tooltip-trigger {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.decoration {
	// text-decoration: underline;
	cursor: pointer;
	color: #4b7902;
}
.fenye {
	text-align: center;
}

.vi_VN {
	.tagheight ::v-deep .el-form-item__content,
	.tagheight .el-select {
		width: 520px;
	}
}
.el-tooltip__popper {
	max-width: 300px !important;
}
.maintenanceContent {
	height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
}
::v-deep .noUnderLine {
	border-bottom: none;
	.el-dialog__header {
		border-bottom: none;
	}
}
.color67C {
	color: #67c23a;
}
</style>
